<template>
  <view class="poster">
    <!-- 主图 -->
    <image :src="mainImg" class="img-main" />
    <!-- 太阳码 -->
    <view class="sun">
      <image src="@/static/share/share_moment.png" />
      <view class="sun-rt">
        <view>
          <text class="sun-tit">长按识别二维码</text>
        </view>
        <text class="sun-con"
          >我正在「保时捷在线商城」参加限量款预约抽签，邀请您一起助力预约！</text
        >
      </view>
    </view>
    <!-- 保存图片按钮 -->
    <view class="btn" @click="saveBtn">
      <text>点击保存图片，分享至朋友圈</text>
    </view>

    <canvas
      class="canvas"
      canvas-id="firstCanvas"
      id="firstCanvas"
      :style="{ width: width + 'rpx', height: height + 'rpx' }"
    ></canvas>
  </view>
</template>

<script>
// 导入海报的绘制工具
import {
  drawImage,
  drawParagraph,
  drawRect
} from "@/pageLuckDraw/utils/poster";
export default {
  data() {
    return {
      width: 622,
      height: 940,
      src: "",

      // 主图图片
      mainImg:
        "https://pcn-omp.oss-cn-beijing.aliyuncs.com/fa7594627fa74f02bb3c9dbebe765127.jpg?x-oss-process=image/resize,p_90",
      // 太阳码图片
      sunImg:
        "https://pcn-omp.oss-cn-beijing.aliyuncs.com/eec12e3fb60b401d822c5de35254c31e.jpg?x-oss-process=image/resize,p_90"
    };
  },
  mounted() {
    this.createPoster();
  },
  methods: {
    saveBtn() {
      // 绘制canvas海报
      this.createPoster();
    },
    /**
     * 绘制canvas海报
     */
    async createPoster() {
      var ctx = uni.createCanvasContext("firstCanvas", this);
      ctx.width = this.width * 2;
      ctx.height = this.height * 2;
      // 绘制白色背景
      drawRect({
        ctx,
        x: 0,
        y: 0,
        radius: 1,
        width: uni.upx2px(this.width),
        height: uni.upx2px(this.height),
        color: "#fff",
        mode: "fill"
      });
      // 绘制大图
      await drawImage({
        ctx,
        img: this.mainImg,
        x: uni.upx2px(40),
        y: uni.upx2px(40),
        width: uni.upx2px(542),
        height: uni.upx2px(600),
        color: "rgba(255,255,255,0)",
        mode: "rect"
      });
      // 绘制太阳码
      await drawImage({
        ctx,
        img: this.sunImg,
        x: uni.upx2px(40),
        y: uni.upx2px(600 + 24 + 40),
        width: uni.upx2px(136),
        height: uni.upx2px(136),
        color: "rgba(255,255,255,0)",
        mode: "circle",
        radius: uni.upx2px(136 / 2)
      });
      // 长按识别二维码
      drawParagraph({
        ctx,
        str: "长按识别二维码",
        maxWidth: uni.upx2px(380),
        x: uni.upx2px(136 + 6 + 40),
        y: uni.upx2px(600 + 28 + 24 + 5 + 40),
        font: {
          fontSize: uni.upx2px(24),
          fontWeight: "bold"
        },
        color: "#323639"
      });
      // 一堆文字
      drawParagraph({
        ctx,
        str: "我正在「保时捷在线商城」参加限量款预约抽签，邀请您一起助力预约！",
        maxWidth: uni.upx2px(380),
        x: uni.upx2px(136 + 6 + 40),
        y: uni.upx2px(600 + 28 + 24 + 44 + 5 + 40),
        font: {
          fontSize: uni.upx2px(24)
        },
        color: "#323639",
        lineHeight: uni.upx2px(40),
        maxLine: 3
      });
      // 底部按钮
      drawRect({
        ctx,
        x: uni.upx2px(40),
        y: uni.upx2px(826),
        radius: 1,
        width: uni.upx2px(542),
        height: uni.upx2px(72),
        color: "#323639",
        mode: "stroke"
      });
      drawParagraph({
        ctx,
        str: "点击保存图片，分享至朋友圈",
        maxWidth: uni.upx2px(542),
        x: uni.upx2px(136 + 6),
        y: uni.upx2px(826 + 40 + 5),
        font: {
          fontSize: uni.upx2px(28)
        },
        color: "#000"
      });
      // 画到画板上
      ctx.draw();

      // 导出图片
      this.getPosterImg();
    },
    /**
     * 导出canvas为1张图片
     */
    getPosterImg() {
      uni.canvasToTempFilePath(
        {
          x: 0,
          y: 0,
          // 画布宽度
          width: this.width,
          height: this.height,
          // 输出图片宽度
          destWidth: this.width * 3,
          destHeight: this.height * 3,
          canvasId: "firstCanvas",
          success: (res) => {
            this.src = res.tempFilePath;
            console.log("src:", this.src);
            this.saveImgToLocal();
          }
        },
        this
      );
    },
    /**
     * 图片保存到本地
     */
    saveImgToLocal() {
      // 第1次会有权限提示，拒绝后就没有了
      uni.authorize({
        scope: "scope.writePhotosAlbum",
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: this.src,
            success: function () {
              uni.showToast({
                title: "保存成功",
                icon: "none",
                duration: 2000
              });
            }
          });
        },
        fail: (err) => {
          console.log("err:", err);
          // 消息提示，打开权限设置
          uni.showModal({
            title: "提示",
            content: "请开启权限:添加到相册",
            success: function (res) {
              if (res.confirm) {
                uni.openSetting();
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        },
        complete: () => {
          this.$emit("close");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.poster {
  background-color: #fff;
  width: 622rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;

  // 主图
  .img-main {
    width: 542rpx;
    max-height: 600rpx;
  }
  // 太阳码
  .sun {
    display: flex;
    align-items: center;
    margin: 24rpx 0;
    image {
      width: 134rpx;
      height: 134rpx;
    }
    .sun-rt {
      flex: 1;
      margin-left: 6rpx;
      .sun-tit {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 24rpx;
        line-height: 40rpx;
        color: #323639;
      }
      .sun-con {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 40rpx;
        color: #000000;
      }
    }
  }

  .btn {
    width: 100%;
    border: 1rpx solid #323639;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    text {
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.canvas {
  position: fixed;
  bottom: -100%;
  background-color: #fff;
}
</style>
